<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    body{
      position:relative;
    }
  </style>
</head>
<!--
滚动条跳转 scroll
data-bs-spy=scroll 添加到用作可滚动区域的元素 通常是body元素
data-bs-target 属性,其值为id或导航栏的类名.navbar. 这是为了保证导航栏与可滚动区域相连
注意 可滚动元素必须与导航栏列表项内的链接id匹配 div id=section1 匹配 a href=#section1
可选的 data-bs-offset 属性规定在计算滚动位置时从顶部偏移的像素数.当导航栏中的链接在跳转到可滚动元素时,如果改变了活动状态时
需要相对定位：带有 data-bs-spy="scroll" 的元素需要 CSS position 属性的值设置为 "relative" 才能正常工作。

-->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<div class="container-fluid mt-3">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <div class="container-fluid">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#section1">第一回</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">第二回</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">第三回</a>
        </li>
      </ul>
    </div>
  </nav>
  <div id="section1" class="container-fluid bg-success text-white" style="padding: 100px 20px;">
    <h1>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h1>
    <p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。</p>
    <p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
    <p>...</p>
  </div>
  <div id="section2" class="container-fluid bg-warning text-white" style="padding: 100px 20px;">
    <h1>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h1>
    <p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之。玄德与关公急止之曰；“他是朝廷命官，岂可擅杀？”飞曰：“若不杀这厮，反要在他部下听令，其实不甘！二兄要便住在此，我自投别处去也！”玄德曰：“我三人义同生死，岂可相离？不若都投别处去便了。”飞曰：“若如此，稍解吾恨。”</p>
    <p>于是三人连夜引军来投朱儁。儁待之甚厚，合兵一处，进讨张宝。是时曹操自跟皇甫嵩讨张梁，大战于曲阳。这里朱儁进攻张宝。张宝引贼众八九万，屯于山后。儁令玄德为其先锋，与贼对敌。张宝遣副将高升出马搦战，玄德使张飞击之。飞纵马挺矛，与升交战，不数合，刺升落马。玄德麾军直冲过去。张宝就马上披发仗剑，作起妖法。只见风雷大作，一股黑气从天而降，黑气中似有无限人马杀来。玄德连忙回军，军中大乱。败阵而归，与朱儁计议。儁曰：“彼用妖术，我来日可宰猪羊狗血，令军士伏于山头；候贼赶来，从高坡上泼之，其法可解。”玄德听令，拨关公、张飞各引军一千，伏于山后高冈之上，盛猪羊狗血并秽物准备。次日，张宝摇旗擂鼓，引军搦战，玄德出迎。交锋之际，张宝作法，风雷大作，飞砂走石，黑气漫天，滚滚人马，自天而下。玄德拨马便走，张宝驱兵赶来。将过山头，关、张伏军放起号炮，秽物齐泼。但见空中纸人草马，纷纷坠地；风雷顿息，砂石不飞。</p>
    <p>...</p>
  </div>
  <div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
    <h1>第三回 议温明董卓叱丁原 馈金珠李肃说吕布</h1>
    <p>且说曹操当日对何进曰：“宦官之祸，古今皆有；但世主不当假之权宠，使至于此。若欲治罪，当除元恶，但付一狱吏足矣，何必纷纷召外兵乎？欲尽诛之，事必宣露。吾料其必败也。”何进怒曰：“孟德亦怀私意耶？”操退曰：“乱天下者，必进也。”进乃暗差使命，赍密诏星夜往各镇去。</p>
    <p>却说前将军、鳌乡侯、西凉刺史董卓，先为破黄巾无功，朝议将治其罪，因贿赂十常侍幸免；后又结托朝贵，遂任显官，统西州大军二十万，常有不臣之心。是时得诏大喜，点起军马，陆续便行；使其婿中郎将牛辅；守住陕西，自己却带李傕、郭汜、张济、樊稠等提兵望洛阳进发。</p>
    <p>...</p>
  </div>
</div>
</body>
</html>
